<div id="editor">
	<p>Adipisicing corporis rem repellendus vel mollitia vero?</p>
	<div data-widget="customwidget">Widget</div>
	<p>Consectetur dolores voluptatibus illo ipsam eveniet?</p>
	<div data-widget="customwidget">Widget</div>
	<p>Lorem ipsum dolor sit amet.</p>
	<div data-widget="customnestedwidget">
		<p>Widget</p>
		<div class="ned">
			<div data-widget="customwidget">Nested widget</div>
		</div>
	</div>
	<p>Many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many,</p>
	<p>many</p>
	<p>lines to test scrollhack for IE.</p>
</div>

<script>
	// Clipboard support only by dialog, no drag & drop of widgets. Could be enabled again after fixing #3460 and #3463.
	if ( bender.tools.env.mobile ) {
		bender.ignore();
	}

	CKEDITOR.replace( 'editor', {
		extraAllowedContent: 'span',
		extraPlugins: 'customwidget',
		allowedContent: true
	} );

	CKEDITOR.plugins.add( 'customwidget', {
		requires: 'widget',
		allowedContent: 'div(copied)',

		init: function ( editor )	{
			var counter = 0;

			editor.widgets.add( 'customwidget', {
				button: 'Add widget',
				template: '<div>Widget</div>',

				getClipboardHtml: getClipboardHtml
			} );

			editor.widgets.add( 'customnestedwidget', {
				button: 'Add nested widget',
				template: '<div><p>Widget</p><div class="ned"><div data-widget="customwidget">Nested widget</div></div></div>',
				getClipboardHtml: getClipboardHtml,

				editables: {
					ned: '.ned'
				}
			} );

			function getClipboardHtml() {
				counter++;

				return '<div data-widget="' + this.name + '">Widget copied ' + counter + ' times!</div>';
			}
		}
	} );
</script>
